<template>
  <left-fixed-right-list>

    <template v-slot:left>
      <div class="user-display-bar">
        <div class="light-grey-bottom calendar-box">
          <MyCalendar/>
        </div>
        <div class="user-statistic light-grey-bottom">
          <div class="user-statistic-info">
            <span>文章总数</span>
            <span>{{ 13 }}</span>
          </div>
          <div class="user-statistic-info">
            <span>点赞总数</span>
            <span>{{ 1024 }}</span>
          </div>
          <div class="user-statistic-info">
            <span>加入时间</span>
            <span>{{ "2022-12-13" }}</span>
          </div>
        </div>
      </div>
    </template>

    <template v-slot:right>
      <div class="warp-user-div" ref="userbar">
        <div class="user-info-div">
          <el-avatar :size="80" class="user-avatar"
                     src="https://p3-passport.byteimg.com/img/user-avatar/55c89a68638551fe1f34b85ef15f6e6b~100x100.awebp"/>
          <ul class="user-info">
            <li class="user-nickname">
              <span>秃头的程序猿攻城狮</span>
            </li>
            <li>
              <span class="icon"><icon-font icon-name="icon-github" color="rgb(22, 22, 20)"/></span>
              <span><a href="https://github.com/246859">https://github.com/246859</a></span>
            </li>
            <li>
              <span class="icon"><icon-font icon-name="icon-youxiang"/></span>
              <span>2633565580@qq.com</span>
            </li>
            <li>
              <span class="icon"><el-icon><Tickets/></el-icon></span>
              <span>这个人很懒，没有任何介绍</span>
            </li>
          </ul>
        </div>

        <div class="light-grey-bottom mobile-word-cloud">
          <word-cloud width="650px" height="250px"/>
        </div>

        <div class="wrap-tab">
          <el-tabs v-model="state.activeName" type="card" class="demo-tabs">
            <el-tab-pane label="文章" name="articles">
              <div class="user-article-list">
                <index-article-bar/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="动态" name="shares">

            </el-tab-pane>
          </el-tabs>
        </div>

      </div>


    </template>
  </left-fixed-right-list>
</template>

<script setup lang="ts">
import IndexArticleBar from "@/components/index/IndexArticleBar.vue";
import LeftFixedRightList from "@/components/common/LeftFixedRightList.vue";
import IconFont from "@/components/common/IconFont.vue";
import WordCloud from "@/components/plugins/WordCloud.vue";
import {onMounted, reactive, ref} from "vue";

const state = reactive({
  activeName: "articles"
});
</script>

<style scoped>
@media screen and (max-width: 1100px) {
  .user-info-div {
    flex-direction: column;
    font-size: 14px !important;
  }

  .user-info {
    text-align: center !important;
  }

  .user-avatar {
    margin: 0 !important;
  }

  .mobile-word-cloud {
    display: none !important;
  }
}

.calendar-box {
  padding: 5px;
  background: white;
  margin-bottom: 15px;
}

.mobile-word-cloud {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.warp-user-div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.user-info-div {
  min-width: 200px;
  width: 600px;
  display: flex;
  margin-bottom: 20px;
  padding: 25px;
  align-items: center;
  background: white;
  border-bottom: 0.5px solid rgb(229, 230, 235);
  font-size: 15px;
}

.user-display-bar {

}

.user-statistic {
  background: white;
  padding: 10px 20px;
  margin-bottom: 15px;
  font-size: 14px;
}

.user-statistic-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 30px;
  cursor: pointer;
}

.user-statistic-info:hover {
  color: #72afd3;
}


.user-avatar {
  margin-right: 50px;
}

.user-info {
  text-align: left;
}

.user-info li {
  margin: 7px 0;
}

.icon {
  margin-right: 5px;
  height: 9px;
  width: 9px;
}

.wrap-tab {
  width: 650px;
  min-width: 300px;
  background: white;
}

:deep(.el-tabs__nav) {
  margin: 0 20px;
}
</style>